<template>
  <div class="bename-wrapper">
    <div class="title tc pf" ref="title" @click="$router.push({name:'name'})"><i class="pa back-icon"></i>改名造运</div>
    <div class="main-wrapper">
      <div class="baby-info-wrapper" v-show="!showSuccess">
        <div class="bubble-title tc border-1px-bottom">
          <span class="left-bubble inline"></span>
          <span class="middle-word inline">请输入您的资料</span>
          <span class="right-bubble inline"></span>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">姓氏 :</div>
          <div class="right inline">
            <input type="text" placeholder="请您输入姓" v-model="lastname">
          </div>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">名字 :</div>
          <div class="right inline">
            <input type="text" placeholder="请您输入名字" v-model="firstname">
          </div>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">性别 :</div>
          <div class="right inline">
            <span class="circle inline" :class="{'active':sex === '男'}" @click="sex = '男'"></span>
            <span class="inline">男</span>
            <span class="circle inline" :class="{'active':sex === '女'}" @click="sex = '女'"></span>
            <span class="inline">女</span>
          </div>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">出生日期 :</div>
          <div class="right inline">
            <input @click="openPicker" readonly v-model="birth" placeholder="请选择日期(阳历)"/>
          </div>
        </div>
        <div class="info-row remark-row">
          <div class="left inline">改名需求 :</div>
          <div class="right inline">
            <textarea class="remark" id="" v-model="remark" maxlength="100" placeholder="100个字以内"></textarea>
          </div>
        </div>
        <div class="bubble-title tc border-1px-bottom connect-title">
          <span class="left-bubble inline"></span>
          <span class="middle-word inline">请输入联系人信息</span>
          <span class="right-bubble inline"></span>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">姓名 :</div>
          <div class="right inline">
            <input type="text" placeholder="请输入姓名" v-model="name">
          </div>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">手机 :</div>
          <div class="right inline">
            <input type="tel" placeholder="请输入手机号码" v-model="phone" maxlength="11">
          </div>
        </div>
        <div class="info-row border-1px-bottom">
          <div class="left inline">邮箱 :</div>
          <div class="right inline">
            <input type="text" placeholder="请输入邮箱" v-model="mail">
          </div>
        </div>
        <p class="tip tc">温馨提示：提交成功后大师会在三日之内提供3个姓名供您选择</p>
      </div>
      <p class="submit-btn" @click="sumbitInfo" v-show="!showSuccess"></p>

      <div class="success-wrapper" v-show="showSuccess">
        <div class="confirm-box">
          <p class="success-title">提交成功</p>
          <div class="success-row">
            <div class="left inline">姓氏 :</div>
            <div class="right inline">{{lastname}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">名字 :</div>
            <div class="right inline">{{firstname}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">性别 :</div>
            <div class="right inline">{{sex}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">出生日期 :</div>
            <div class="right inline">{{birth}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">联系方式 :</div>
            <div class="right inline">{{phone}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">邮箱 :</div>
            <div class="right inline">{{mail}}</div>
          </div>
          <div class="success-row">
            <div class="left inline">具体要求 :</div>
            <div class="right inline remark">{{remark}}</div>
          </div>
        </div>
        <p class="tip tc">温馨提示：提交成功后大师会在三日之内提供3个姓名供您选择</p>
        <p class="back-btn" @click="$router.push({name:'name'})"></p>
      </div>

    </div>
    <div id="time-wrapper">
      <mt-datetime-picker
        @confirm="handleConfirm"
        :startDate=startDate
        :endDate=endDate
        v-model="pickerValue"
        ref="picker"
        type="date">
      </mt-datetime-picker>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { DatetimePicker } from 'mint-ui'
  Vue.component(DatetimePicker.name, DatetimePicker)
  import 'mint-ui/lib/style.css'
  import AsyncJson from '@/common/js/async'
  import Toast from '@/common/js/toast'

  export default {
    name: "Bename",
    data() {
      return {
        startDate:new Date('1938'),
        endDate:new Date(),
        pickerValue:new Date(),
        lastname:"",
        firstname:"",
        sex:"男",
        birth:"",
        nameform:"",
        remark:"",
        name:"",
        phone:"",
        mail:"",
        showWarn:false,
        showSuccess:false
      }
    },
    methods: {
      isLogin(){
        if(sessionStorage.getItem("loginFlag") !== "yes" || !sessionStorage.getItem("userId")){
          this.$router.push({name:"login",params:{to:'bename'}});
        }
      },
      openPicker() {
        this.$refs.picker.open();
      },
      handleConfirm(val){
        let baby_year = val.getFullYear();
        let baby_month = val.getMonth() + 1;
        let baby_day = val.getDate();
        this.birth = baby_year + "-" + baby_month  + "-" + baby_day;
      },
      sumbitInfo(){
        if(!this.lastname || !this.firstname || !this.remark || !this.name || !this.mail || !this.phone){
          Toast("请将信息补充完整!");
          return;
        }
        if(!/^1[34578]\d{9}$/.test(this.phone)){
          Toast("手机号输入格式不正确!");
          return;
        }
        if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.mail)){
          Toast("邮箱格式不正确!");
          return;
        }
        AsyncJson("POST","websubmit/websubmitchangename",
          {
            lastname:this.lastname,
            firstname:this.firstname,
            sex:this.sex,
            birthdaydate:this.birthdaydate,
            remark:this.remark,
            ordertype:"改名造运",
            name:this.name,
            mobilephone:this.phone,
            email:this.mail
          }
        ).then( res => {
          if(res.status === "000"){
            document.documentElement.scrollTop = 0;
            this.showSuccess = true;
            console.log(res.data);
          }else{
            Toast(res.data);
          }
        }).catch( err => {
          console.log(err);
        })
      }
    },
    created(){
      this.isLogin();
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylu/index.styl"

  .bename-wrapper
    padding-top 100px
    .title
      top 0
      left 0
      z-index 9
      width 100%
      height 100px
      line-height 100px
      font-size 36px
      background #ffffff
      .back-icon
        top 0
        left 0
        width 80px
        height 100px
        background url("../bename/back-icon.png") no-repeat center center
        background-size 20px 36px
    .main-wrapper
      height 1620px
      background url("../bename/bename-bg.png") no-repeat center center
      background-size cover
      padding-top 240px
      .bubble-title
        width 657px
        margin 0 auto
        padding-top 20px
        font-size 0
        height 108px
        border-1px-bottom(#d8d8d8)
        &.connect-title
          padding-top 0
        span
          font-size 32px
          color #b57b39
          height 32px
          line-height 32px
          margin-top 38px
        .middle-word
          margin 38px 8px
        .left-bubble
          width 30px
          background url("../bename/zhuangshi1.png") no-repeat center center
          background-size 29px 10px
        .right-bubble
          width 30px
          background url("../bename/zhuanngshi2.png") no-repeat center center
          background-size 29px 10px
      .baby-info-wrapper
        width 680px
        height 1400px
        margin 0 auto
        background url("../bename/baby-info-bg.png") no-repeat center center
        background-size cover
        .info-row
          width 657px
          margin 0 auto
          height 120px
          border-1px-bottom(#d8d8d8)
          font-size 0
          &.remark-row
            height 200px
            &:after
              border none
          .left
            padding-left 28px
            width 202px
            height 120px
            line-height 120px
            font-size 34px
          .right
            width 427px
            font-size 0
            .warn
              top -5px
              left -80px
              font-size 24px
              color #808080
              width 200px
              height 46px
              background url("../bename/warn-bg.png") no-repeat center center
              background-size cover
            input
              outline none
              border none
              background none
              width 350px
              height 40px
              line-height 40px
              margin-top 40px
              font-size 34px
              &::-webkit-input-placeholder
                color #808080
            span
              font-size 34px
              height 34px
              line-height 34px
              margin 48px 56px 0 0
              &.nameform
                margin-right 24px
              &:last-child
                margin-right 0
            .circle
              width: 35px
              height: 35px
              margin 46px 28px 0 0
              border-radius 50%
              border: solid 1px #a5a5a5
              &.nameform-circle
                margin-right 8px
              &.active
                background url("../bename/xuanzhong-1.png") no-repeat center center
                background-size 20px 20px
            .remark
              width 400px
              height 160px
              outline none
              background none
              resize none
              margin-top 28px
      .submit-btn
        width 400px
        height 60px
        background url("../bename/submit-confirm-btn.png") no-repeat center center
        background-size cover
        margin 56px auto 0
      .success-wrapper
        .confirm-box
          padding 40px 0
          width 680px
          border-radius 5px
          margin 0 auto
          background #ffffff
          .success-title
            width 150px
            margin 0 auto 90px
            color #cfa972
            font-size 34px
            height 38px
            line-height 38px
            padding-left 50px
            background url("../bename/ok.png") no-repeat center left
            background-size 38px 38px
          .success-row
            width 600px
            margin 0 auto 54px
            font-size 0
            .left
              width 186px
              font-size 32px
            .right
              font-size 32px
              width 414px
              &.remark
                text-align justify
                line-height 40px
        .back-btn
          width 400px
          height 60px
          margin 34px auto 0
          background url("../bename/back.png") no-repeat center left
          background-size cover
      .tip
        color #e60012
        margin 30px auto 0
        font-size 20px
        transform scale(0.9)
        transform-origin center top
</style>
